<template>
  <div class="add-value" v-show="isShow">
    <h3 class="textBold f16 cor666">为您推荐官方增值服务</h3>
    <div class="pro-box">
      <div class="pro-item" @click="choose(item.product_id)" v-for="(item, index) in list" :key="index">
        <div class="pro-pic"><img :src="item.image" alt="" class="objectCover" /></div>
        <div class="pro-desc">
          <p class="ser-info textOverflow3">{{ item.store_name }}</p>
          <p class="pro-price">
            <span>¥ {{ item.price }}</span>
            /起
          </p>
        </div>
        <div class="pro-check" :class="select.includes(item.product_id) ? 'active' : ''"></div>
      </div>
    </div>

    <div class="add-btn">
      <div class="btnItem need transition" @click="addBuy">需要，一起购买</div>
      <div class="btnItem no-need transition" @click="buy">不需要，直接购买产品</div>
    </div>
    <div class="close" @click="$parent.isShow = false"></div>
  </div>
</template>

<script>
import { tuijianFuwu, addCart } from '@/request/api';

export default {
  name: 'AddValue',
  props: {
    isShow: Boolean,
    id: '',
    number: ''
  },
  data() {
    return {
      list: [],
      select: [],
      cartList: []
    };
  },
  mounted() {
    this.getFuwu();
  },
  methods: {
    addBuy() {
      let that = this;
      if (this.select.length === 0) {
        this.$toastVant('请选择增值服务！');
      } else {
        this.$toastVant.loading('请稍后');
        that.buy('add');
        for (let i in this.select) {
          let data = {
            cart_num: 1,
            is_new: 1,
            product_id: this.select[i],
            product_type: 0
          };
          addCart(data).then(res => {
            that.cartList.push(res.data.cart_id);
          });
        }
        setTimeout(function() {
          that.$toastVant.clear();
          let arrSting = that.$common.arrToString(that.cartList);
          that.$router.push({ name: 'CateProductOrder', query: { cart_id: arrSting } });
        }, 2000);
      }
    },
    buy(type) {
      let that = this;
      let data = {
        cart_num: this.number,
        is_new: 1,
        product_id: this.id,
        product_type: 0
      };
      addCart(data)
        .then(res => {
          if (type === 'add') {
            that.cartList.push(res.data.cart_id);
          } else {
            this.$router.push({ name: 'CateProductOrder', query: { cart_id: res.data.cart_id, is_cart: 0 } });
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    getFuwu() {
      tuijianFuwu(this.$route.params.id)
        .then(res => {
          this.list = res.data;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    choose(id) {
      let index = this.select.indexOf(id);
      if (index === -1) {
        this.select.push(id);
      } else {
        this.select.splice(index, 1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/assets/style/common.scss';

.add-value {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 25px 30px 46px;
  font-size: 16px;
  color: #656565;
  background: #ffffff;
  border: 1px solid #e9e9e9;
  z-index: 950;
}

.close {
  width: 33px;
  height: 33px;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 15px;
  background: url(~@/assets/images/close1.png) center;
}

.add-value .pro-box {
  display: flex;
  margin-top: 27px;
  margin-right: -26px;
}

.add-value .pro-box .pro-item {
  flex: 1;
  display: flex;
  padding: 7px 7px 9px;
  border: 1px solid #e9e9e9;
  margin-right: 26px;
  cursor: pointer;
  position: relative;
}

.add-value .pro-box .pro-item .pro-pic {
  flex: 1;
  height: 130px;
}

.add-value .pro-box .pro-item .pro-price {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 14px;
}

.add-value .pro-box .pro-item .pro-desc {
  margin-left: 20px;
  flex: 1;
  position: relative;
}

.pro-desc .ser-info {
  margin: 10px 0 10px;
  line-height: 20px;
  height: 60px;
  overflow: hidden;
  font-size: 15px;
}

.pro-price span {
  font-size: 20px;
  font-weight: bold;
  color: #e38b2c;
}

.pro-check {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #eee;
  position: absolute;
  left: 5px;
  top: 5px;
}

.pro-check.active::after {
  content: '';
  width: 14px;
  height: 14px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #e38b2c;
}

.add-btn {
  display: flex;
  justify-content: center;
}

.add-btn .btnItem {
  display: block;
  width: 187px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  margin-top: 60px;
  color: #fff;
  background: #e38b2b;
  border-radius: 10px;
  margin-right: 22px;
  cursor: pointer;
}

.add-btn .btnItem:hover {
  opacity: 0.8;
}

.add-btn .no-need {
  border: 1px solid #656565;
  border-radius: 10px;
  color: #656565;
  background: none;
  line-height: 43px;
}
</style>
